<template>
	<div>
		{{ticked.size}}, {{expanded.size}}
		<Table
			hoverable
			highlightable
			cache-key="test"
			:filter="realFilter"
			:loading="loading"
			border
			tick-strategy="leaf-filtered"
			:children-key="listMode?'':'children'"
			obj-key="id"
			:data="realData"
			:summary-data="summary"
			:tree-ticked.sync="ticked"
			:tree-expanded.sync="expanded"
			:selected.sync="selected"
			:columns="columns"
			:summary-merge-method="summaryMergeMethod"
			style="margin:20px;width:700px;height:500px;"
			:row-class="rowClass"
			:row-style="rowStyle"
			@tree-lazy-load="lazLoad"
			@expand-lazy-load="expandLazLoad"
			@click="click"
			@dblclick="dblclick"
			@v-scroll="vScrollFn">
			<template #body-cell-test1="{value,index}">
				插槽,值({{value}}),索引({{index}})
			</template>
			<template #head-cell-test1>
				头插槽
			</template>
			<template #summary-cell="{columnIndex}">
				{{columnIndex===0?'总结':'内容'}}
			</template>
			<template #summary-cell-test1>
				特定插槽
			</template>
			<template v-if="customTemplate" #loading="{height}">
				加载中{{height}}
			</template>
			<template v-if="customTemplate" #no-data="{height}">
				你是在火星吗?{{height}}
			</template>
			<template v-if="customTemplate" #no-results="{height}">
				你到底想找什么?{{height}}
			</template>
			<template #expanded>
				这是可展开行
			</template>
		</Table>
		<Input v-model="filter" placeholder="过滤条件" style="width:200px;margin:20px"/>
		<Checkbox v-model="regexp" label="正则" style="margin:20px"/>
		<Checkbox v-model="loading" label="加载中" style="margin:20px"/>
		<Checkbox v-model="emptyData" label="空数据" style="margin:20px"/>
		<Checkbox v-model="customTemplate" label="自定义插槽" style="margin:20px"/>
		<Checkbox v-model="listMode" label="列表模式" style="margin:20px"/>
		<button @click="show=true">弹窗中的表格</button>
		<Modal
			v-model="show"
			full-width
			width="600"
			title="标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题">
			<template #default="{width}">
				<button @click="change=!change">切换缓存key</button>
				<Table
					:cache-key="change?'test1':'test2'"
					:filter="realFilter"
					obj-key="id"
					:data="data2"
					:columns="columns2"
					:configurable-disable="configurableDisable"
					:style="{width:width-40+'px'}"
					style="margin:20px;height:250px;"/>
			</template>
		</Modal>
	</div>
</template>

<script>
import Table from '@/components/pc/table';
import {Modal} from '@/components/pc';
import Checkbox from '@/components/pc/checkbox';
import Input from '@/components/pc/input';
import {MySet} from '@/util/polyfill';

export default {
	name:'index',
	components:{
		Table,
		Modal,
		Checkbox,
		Input,
	},
	data(){
		const count=4;
		const data=new Array(count);
		for(let i=0;i<count;++i){
			data[i]={
				key1:i+1,
				id:'p'+i,
				children:[
					{key1:2222,id:'s'+i+'-1',children:[{key1:3333,id:'ss'+i+'-1'},{key1:3333,id:'sss'+i+'-1'},{key1:3333,id:'ssss'+i+'-1'}]},
					{key1:2222,id:'s'+i+'-2',children:[{key1:3333,id:'ss'+i+'-2'},{key1:3333,id:'sss'+i+'-2'},{key1:3333,id:'ssss'+i+'-2'}]},
					{key1:2222,id:'s'+i+'-3',children:[{key1:3333,id:'ss'+i+'-3'},{key1:3333,id:'sss'+i+'-3'},{key1:3333,id:'ssss'+i+'-3'}]},
					{key1:2222,id:'s'+i+'-4',_treeLazy:true},
				]
			};
		}
		data[1]._expandLazy=true;
		data[2]._expandLazy=true;
		data[3]._listExpandable=false;
		data[3]._treeExpandable=false;
		data[2].children[2].children[0]._treeNoTick=true;
		data[0].children[0].children[0]._treeTickable=false;
		data[0].children[1].children[0]._treeTickable=false;
		data[0].children[1].children[1]._treeTickable=false;
		data[0].children[1].children[2]._treeTickable=false;
		data[0].children[2].children[0]._treeTickable=false;
		const count2=0;
		const extraColumns=new Array(count2);
		for(let i=0;i<count2;++i){
			extraColumns[i]={
				name:'custom'+i,
				label:'自定义'+i,
				title:'自定义'+i,
				field:'key1',
				key:'key1',
				width:50,
				headClasses:'headClasses3',
			};
		}
		const data2=[];
		for(let i=0;i<5;++i){
			data2.push({
				id:i,
				key1:`第${i+1}行,1列`,
				key2:`第${i+1}行,2列`,
				key3:`第${i+1}行,3列`,
				key4:`第${i+1}行,4列`,
			});
		}
		return {
			show:false,
			columns:[
				{
					name:'group2',
					label:'列头分组2',
					title:'列头分组2',
					// fixed:'left',
					headClasses:'headClasses1',
					children:[
						{
							name:'group2-0',
							type:'radio',
							label:'列头分组2-0',
							title:'列头分组2-0',
							field:'key1',
							key:'key1',
							width:'50+1fr',
							headSlot:'test1'
						},{
							name:'group2-1',
							type:'checkbox',
							label:'列头分组2-1',
							title:'列头分组2-1',
							field:'key1',
							key:'key1',
							width:'50+1fr',
							checkBeforeChange(data){
								console.log('checkBeforeChange',data);
								if(data.cellScope.row.id ==='p1'){
									return Modal.confirm({
										title:'询问',
										content:'是否选择?',
									}).then(() => {
										return true;
									}).catch(() => {
										return false;
									});
								}
							},
							headCheckBeforeChange(data){
								console.log('headCheckBeforeChange',data);
								if(data === 'indeterminate'){
									return Modal.confirm({
										title:'询问',
										content:'是否选择?',
									}).then(() => {
										return true;
									}).catch(() => {
										return false;
									});
								}
							},
						},{
							name:'group2-2',
							label:'列头分组2-2',
							title:'列头分组2-2',
							children:[
								{
									name:'group2-2-1',
									type:'expand',
									label:'列头分组2-2-1',
									title:'列头分组2-2-1',
									field:'key1',
									key:'key1',
									width:'50+1fr',
									headClasses:'headClasses2',
									summarySlot:'test1'
								},{
									name:'group2-2-2',
									label:'列头分组2-2-2',
									title:'列头分组2-2-2',
									field:'key1',
									key:'key1',
									width:'50+2fr',
									summaryAlign:'center'
								},
							]
						}
					]
				},{
					name:'col1',
					type:'tree',
					label:'字段1',
					title:'字段1',
					field({row,index}){
						return `第${index+1}行, 数据: ${row.key1}`;
					},
					key:'key1',
					format(val){
						return val+'+格式化';
					},
					align:'right',
					width:200,
					headClasses:'headClasses3',
				},{
					// fixed:'right',
					name:'col2',
					label:'字段2',
					title:'字段2',
					field:'key1',
					key:'key1',
					format(val){
						return '格式化'+val;
					},
					align:'center',
					width:'50+10%',
				},{
					name:'col3',
					label:'固定列',
					title:'固定列',
					field:'key1',
					format(val){
						return '格式化'+val;
					},
					slot:'test1',
					key:'key1',
					align:'right',
					width:'100+1fr',
				},{
					name:'group1',
					label:'列头分组1',
					title:'列头分组1',
					fixed:'right',
					children:[
						{
							name:'group1-1',
							label:'列头分组1-1',
							title:'列头分组1-1',
							field:'key1',
							key:'key1',
							width:'50+1fr',
						},{
							name:'group1-2',
							label:'列头分组1-2',
							title:'列头分组1-2',
							children:[
								{
									name:'group1-2-1',
									label:'列头分组1-2-1',
									title:'列头分组1-2-1',
									field:'key1',
									key:'key1',
									width:'50+1fr',
								},{
									name:'group1-2-2',
									label:'列头分组1-2-2',
									title:'列头分组1-2-2',
									field:'key1',
									key:'key1',
									width:'50+2fr',
								},
							]
						}
					]
				}
			].concat(extraColumns),
			data,
			realData:[],
			summary:[{key1:'总结'}],
			filter:'',
			ticked:new MySet([data[0],data[0].children[2].children[0]]),
			selected:null,
			expanded:new MySet(),
			loading:false,
			emptyData:false,
			customTemplate:false,
			listMode:false,
			regexp:false,
			data2,
			change:false,
		};
	},
	computed:{
		realFilter(){
			if(this.regexp){
				try{
					return new RegExp(this.filter);
				}catch{}
			}
			return this.filter;
		},
		columns2(){
			const extra=this.change?'-xx':'';
			return [
				{
					type:'checkbox',
					width:50,
					name:'ceshi'+extra,
					configurable:false,
				},{
					name:'col1',
					label:'字段1'+extra,
					field:'key1',
					mergeMethod({row:{id:index}}){
						if(index===0){
							return {rowspan:2};
						}else if(index===1){
							return {rowspan:0};
						}else if(index===2){
							return {colspan:2};
						}
					},
				},{
					name:'col2',
					label:'字段2'+extra,
					field:'key2',
					mergeMethod({row:{id:index}}){
						if(index===2){
							return {rowspan:0};
						}
					}
				},{
					name:'col3',
					label:'字段3'+extra,
					field:'key3',
				},{
					name:'col4',
					label:'字段4'+extra,
					field:'key4',
				},
			];
		},
	},
	watch:{
		emptyData:{
			handler(val){
				if(val){
					this.realData=[];
				}else{
					this.realData=this.data;
				}
			},
			immediate:true
		}
	},
	methods:{
		lazLoad({meta,done,fail}){
			console.log(meta);
			setTimeout(() => {
				done([{key1:3333,id:'a1-'+meta.key},{key1:3333,id:'a2-'+meta.key},{key1:3333,id:'a3-'+meta.key}]);
			},2000);
		},
		expandLazLoad({row,done,fail}){
			console.log(row);
			setTimeout(() => {
				done();
			},2000);
		},
		rowClass({index}){
			if(index===0){
				return 'my-class';
			}
			return '';
		},
		rowStyle({index}){
			if(index===0){
				return {
					color:'red',
					background:'#e8e8fa'
				};
			}
			return {};
		},
		summaryMergeMethod({columnIndex}){
			if(columnIndex===4){
				return {colspan:2};
			}else if(columnIndex===5){
				return {colspan:0};
			}
		},
		click(scope,e){
			console.log('click',scope,e);
		},
		dblclick(scope,e){
			console.log('dblclick',scope,e);
		},
		configurableDisable(show,col){
			// return true;
		},
		vScrollFn(info){
			console.log('滚动',info);
		}
	}
};
</script>

<style lang="scss">

</style>